/* Normalize */
html,body,div,span,
object,iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,abbr,address,cite,code,del,dfn,em,
img,ins,kbd,q,samp,small,strong,
sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,
time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  font-size:100%;
  vertical-align:baseline;
}

html {overflow-y:scroll}

article,aside,
figure,figcaption,footer,
header,hgroup,menu,nav,section {display:block}

time,mark {display:inline}
*:focus {outline:none}
strong,b {font-weight:bold}
em,i,cite {font-style:italic}

h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  letter-spacing:-1px;
}

h1 {font-size:160%}
h2 {font-size:150%}
h3 {font-size:135%}
h4,h5,h6 {font-size:115%}

a,a:hover,
a:visited {
  color:#225588;
  text-decoration:none;
}

a:hover,
a:visited:hover {
  color:#5687b8;
  text-decoration:underline;
}

img {
  max-width:100%;
  height:auto;
}

a img {border-width:0}

/* Tags & Main Classes */
.loader {background:transparent url('') no-repeat 50% 120px}

.hitam,
.black {
  background-color:black !important;
  color:white;
}

.benar,
.true {background-color:#EDFFCE !important}

.salah,
.false {background-color:#FFDED8 !important}

.full,
table.full {
  width:96.8%;
  margin-left:auto;
  margin-right:auto;
}

.float-left {float:left}
.float-right {float:right}
.text-center {text-align:center}
.text-left {text-align:left}
.text-right {text-align:right}

.alignright,
.align-right {
  float:right;
  margin:4px 0 2em .7em;
}

.alignleft,
.align-left {
  float:left;
  margin:4px 2em .7em 0;
}

.center {
  margin-left:auto;
  margin-right:auto;
  display:block;
  text-align:center;
}

hr {
  height:1px;
  border:none;
  background:none;
  border-bottom:1px dotted #bbb;
}

code {
  color:#888;
  font-family:"Courier New",Courier,Monospace;
  font-size:0.923076923077em;
}

code a,
code a:hover {color:inherit}
code a:hover {background-color:#E6ECF5}

.underline {border-bottom:1px dashed #839496}
.highlight,mark {background-color:skyblue}

pre .highlight,
pre .highlight span,
pre mark,
pre mark span {
  background-color:white;
  color:#839496 !important;
}

code .branch-link,
code .branch-link:hover {
  background-color:#052127;
  color:#839496;
  text-decoration:none;
  border:1px dotted;
  line-height:12px;
}

sup,sub {
  vertical-align:baseline;
  position:relative;
  top:-.4em;
}

sub {top:.4em}

acronym,abbr {
  cursor:help;
  color:#E050A9;
}

blockquote,b[rel="quote"] {
  display:block;
  font:inherit;
  position:relative;
  background-color:#5D73B5;
  color:white;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  margin:.75em 0;
  padding:1.3em 1.6em;
}

blockquote a,
blockquote a:visited,
blockquote a:hover,
blockquote code,
b[rel="quote"] a,
b[rel="quote"] a:hover {
  color:#FFEAE5 !important;
  background:none;
  text-shadow:none;
}

blockquote:before,
b[rel="quote"]:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  bottom:100%;
  right:15px;
  border:7px solid transparent;
  border-color:transparent transparent #5D73B5;
}

figure {
  text-align:center;
  background-color:#CFDBEC;
  border:1px solid #a5a5a5;
  margin:0 5%;
  padding:10px;
}

figure figcaption {
  margin:10px 0 0;
  font-size:98%;
  font-style:italic;
  font-family:Arial,Sans-Serif;
}

/* Jump-Link class name */
.target-elem:before {
  content:"";
  display:block;
  height:40px;
  margin-top:-40px;
}

/* Forms */
input[type="text"],
textarea {
  border:1px solid #ccc;
  margin-bottom:.4em;
  background-color:#fafafa;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  font:inherit;
  line-height:normal;
  padding:2px 2px;
}

textarea:focus {background-color:#FFE4B5}

input[type="text"].warna,
input[type="text"].color {
  vertical-align:baseline;
  border:1px solid #eee;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  margin:0 4px;
  padding:15px 25px;
  font:bold 11px Verdana,Arial,Sans-Serif;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
.button,button,
.button.disabled:active {
  cursor:pointer;
  background-color:#248AB0;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.26));
  border:2px solid white;
  position:relative;
  top:-1px;
  color:#ebebeb !important;
  font:normal bold 11px Arial,Sans-Serif;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  padding:.45em .9em;
  white-space:nowrap;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover,button:hover,
.button:focus,
.button:visited:hover {
  background-color:#0671A1;
  color:white !important;
  border-color:white;
  text-decoration:none;
}

.button-group .button:focus {border:2px solid white}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.button:active,button:active {
  top:0;
  background-color:#005E90;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,.26),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,.26),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,.26),rgba(0,0,0,0));
  background-image:-o-linear-gradient(top,rgba(0,0,0,.26),rgba(0,0,0,0));
  background-image:linear-gradient(top,rgba(0,0,0,.26),rgba(0,0,0,0));
  border-color:white;
}

.button.disabled,
.button.disabled:hover,
.button.disabled:active {
  background-color:#bbb;
  cursor:text;
  pointer-events:none;
}

.button-group {text-align:center}

.button.small,
.button.small:active,
.button.small:focus {
  border:none;
  padding:.45em .9em;
}

.button.small.square-btn,
.button.small.square-btn:active,
.button.small.square-btn:focus {
  font-size:9px;
  text-transform:uppercase;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  border:4px solid #333;
  padding:.45em .9em .54em;
  width:auto;
  margin:2px 0 0 2px;
}

a.green,
a.subscribe,
a.green:hover,
a.subscribe:hover {
  font-size:80%;
  color:#eee;
  background-color:#527915;
  text-transform:uppercase;
  position:relative;
  top:-3px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  margin:0 7px;
  padding:3px 10px;
  text-decoration:none;
}

a.green:hover,
a.subscribe:hover {background-color:#4B6F15}

a.green:active,
a.subscribe:active {
  background-color:#999;
  color:white;
}

.color-box {
  display:inline-block;
  width:30px;
  height:30px;
  background-color:white;
  border:2px solid #222;
  border-color:rgba(0,0,0,.2);
  font:0/0 Serif;
  color:transparent;
  text-shadow:none;
}

.color-box:hover {
  border-color:#333;
  border-color:rgba(0,0,0,.4);
}

/* Table */
table[border="1"] {
  border-collapse:collapse;
  margin-top:10px;
  margin-bottom:10px;
}

table[border="1"] th,
table[border="1"] td {
  border:1px solid #bbb;
  padding:.5em .7em;
}

td {vertical-align:top}

table[border="1"] th {
  background-color:#fafafa;
  font-weight:bold;
  text-align:left;
}

table[border="1"] caption {
  padding:.5em .7em;
  background-color:#bbb;
}

table.config {background-color:#FFF0A0}

table.config td,
table.config th {border-color:#333}

table.config th {
  background-color:#333;
  color:white;
}

table.config caption {
  background-color:#333;
  color:#bbb;
}

table tr[id]:target td {background-color:gold}
table.reference {width:100%}

/* Blocks */
.catatan {
  background-color:#FFFAC1;
  padding:1.8em 2em;
  margin:1em 2% 1.7em 2%;
  font-family:Georgia,Serif;
  font-style:italic;
  line-height:1.42;
  color:#222;
  position:relative;
  text-shadow:none;
}

.catatan:before {
  content:"";
  width:100%;
  height:4px;
  background-color:#4b8db5;
  background-image:-webkit-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-moz-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-ms-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-o-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  position:absolute;
  top:0;
  right:0;
  left:0;
}

.catatan code {font-style:normal}
.catatan h2:first-child {margin-top:0}

.catatan.resource {
  width:auto;
  font-family:Tahoma,Verdana,Arial,Sans-Serif;
  font-style:normal;
  padding:1.5em;
  background-color:#eee;
}

.catatan.resource img {
  border:2px solid #aaa !important;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

.update {
  color:#A73B3B;
  margin-left:1em;
  margin-right:1em;
  border-top:1px solid;
  border-bottom:1px solid;
  padding:1em;
}

.tip {
  background-color:#BEDBF4;
  background-image:-webkit-linear-gradient(top,#BEDBF4,#70B3DC);
  background-image:-moz-linear-gradient(top,#BEDBF4,#70B3DC);
  background-image:-ms-linear-gradient(top,#BEDBF4,#70B3DC);
  background-image:-o-linear-gradient(top,#BEDBF4,#70B3DC);
  background-image:linear-gradient(top,#BEDBF4,#70B3DC);
  padding:7px 10px;
  border:1px solid #5E96B7;
  border-bottom-color:#5688A7;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  color:#29526F;
  text-shadow:0 1px 0 rgba(255,255,255,.1);
  -webkit-box-shadow:0 1px 0 rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 0 rgba(0,0,0,.2);
  box-shadow:0 1px 0 rgba(0,0,0,.2);
}

.alert,
.instruction {
  background-color:#FFBABA;
  color:#D8000C;
  border:1px solid;
  padding:.8em 1em;
  margin:1.5em 0;
}

.instruction {
  background-color:#DFF2BF;
  color:#4F8A10;
}

.block {
  border:2px solid #888;
  background-color:#ccc;
  padding:6px 10px;
  margin:0 14px;
  -webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.2);
}

.template {
  max-height:250px;
  overflow:auto;
  background-color:#fafafa;
  border:3px double #bbb;
  width:96%;
  -webkit-box-shadow:inset 0 0 5px #888;
  -moz-box-shadow:inset 0 0 5px #888;
  box-shadow:inset 0 0 5px #888;
  margin:10px auto;
  padding:10px;
}

.template table {
  border:none;
  margin:0 0;
}

.template table h4 {
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 5px;
}

.template table h4 a,
.template table h4 a:visited {
  display:block;
  color:#247C83;
  padding:5px 10px;
  background-image:-webkit-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-o-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
}

.template td {
  border:none;
  padding:15px;
}

.template td img {
  border:1px solid #ccc;
  background-color:white;
  padding:1px;
}

.reference-link p:only-child {text-align:right}

#alexa {
  width:250px;
  padding:10px;
  margin:0 auto 30px;
  text-align:center;
  background-color:#333;
  -webkit-box-shadow:inset 0 1px 5px black;
  -moz-box-shadow:inset 0 1px 5px black;
  box-shadow:inset 0 1px 5px black;
  border:2px solid #ccc;
}

/* Breadcrumb */
.breadcrumb {
  position:fixed !important;
  position:absolute;
  z-index:100;
  top:0;
  right:0;
  left:0;
  background-color:#333;
  color:#ccc;
  border-bottom:2px solid #999;
  padding:2px 0 2px 1%;
  -webkit-box-shadow:0 0 7px black;
  -moz-box-shadow:0 0 7px black;
  box-shadow:0 0 7px black;
}

.breadcrumb a,
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:active {
  color:white;
  text-decoration:none;
}

.breadcrumb a:hover {color:#ddd}

.breadcrumb .kanan {
  position:absolute;
  top:2px;
  right:1%;
}

/* Above post */
#date-published {
  margin:-10px 0 30px;
  font-family:Alike,Cambria,Georgia,Serif;
  border-right:5px solid #39f;
  padding:0 15px 0 0;
  text-align:right;
  position:relative;
}

.reaction-button {
  display:block;
  width:100%;
  height:22px;
  position:absolute;
  top:-2px;
  right:0;
  left:-12px;
}

/* Posts */
.post {
  border-top:1px dotted #bbb;
  border-bottom:1px dotted #bbb;
  margin:.3em 0 25px;
  padding:0 13px;
}

.post-title {
  letter-spacing:0;
  border:1px dotted #bbb;
  border-width:0 1px 1px;
  font:normal normal 146%/1.6 Alike,Cambria,'Book Antiqua',Georgia,Serif;
  padding:3px 14px 5px;
  -webkit-transition:all 0.26s ease-in-out;
  -moz-transition:all 0.26s ease-in-out;
  -ms-transition:all 0.26s ease-in-out;
  -o-transition:all 0.26s ease-in-out;
  transition:all 0.26s ease-in-out;
}

.post-title a,
.post-title a:hover {
  text-decoration:none;
  color:inherit;
}

.post a img {
  background-color:#ccc;
  background-color:rgba(0,0,0,.2);
  padding:4px;
  border:none;
}

.post-thumbnail {
  width:72px;
  height:72px;
  float:left;
  margin-right:10px;
  overflow:hidden;
}

.post-body {
  border:1px dotted #bbb;
  border-width:0 1px;
  padding:20px 14px;
}

.post-body a.button {
  padding:1em 1.7em;
  line-height:5.5em;
}

.post-body a:focus {border-bottom:2px solid #FEC005}

/* Safe CSS => Move from <br> tag to <p> tag without destroying my older posts layout */
.safe h1,
.safe h2,
.safe h3,
.safe h4,
.safe h5,
.safe h6,
.safe hr {margin:3em 0 1em 0}
.safe hr + p {margin-top:1.7em}

.safe p,
.safe ul,
.safe ol,
.safe .center,
.safe .button-group,
.safe .block,
.safe .tip,
.safe .instruction,
.safe .alert,
.safe .update,
.safe .jsfiddle-demo,
.safe blockquote,
.safe pre,
.safe figure,
.safe form,
.safe iframe,
.safe table {margin-bottom:1.7em}
.safe li {margin:0 0 .4em 1em}

.safe ul,
.safe ol {margin-left:1.5em}

.safe p + br,
.safe ul + br,
.safe ol + br,
.safe .center + br,
.safe .button-group + br,
.safe .block + br,
.safe .tip + br,
.safe .instruction + br,
.safe .alert + br,
.safe blockquote + br,
.safe pre + br,
.safe figure + br,
.safe form + br,
.safe iframe + br,
.safe table + br {display:none}

.safe .alignleft + p,
.safe .alighright + p {margin-top:0}
.post-body.safe p:last-child,
.post-body.safe p:only-child,
.post-body.safe div p:only-child,
.post-body.safe div p:last-child,
.post-body.safe blockquote p:only-child,
.post-body.safe blockquote p:last-child {margin:0 0 0 0}
/* end safe CSS */

.post-body section:before {
  content:"";
  display:block;
  height:30px;
  margin:-30px 0 0;
}

.table-of-content {font-size:96%}
.post-body section footer {clear:both}

.post-body ul.listing {
  font-size:10px;
  text-transform:uppercase;
}

.post-body ul.listing li {margin-bottom:0}

.post-body ul.listing li.title {
  list-style:none;
  font-weight:bold;
  margin-left:-14px;
}

.post-body figure img,
.catatan img {
  border:none;
  padding:0 0;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,.7);
  box-shadow:0 0 3px rgba(0,0,0,.7);
  display:block;
  margin:0 auto;
}

.post-body .ad-text {margin-bottom:30px}

.post-footer {
  background-color:#eee;
  border:1px dotted #bbb;
  border-width:1px 1px 0;
  font-size:80%;
  color:#666;
  text-transform:uppercase;
  font-weight:700;
  padding:4px 14px;
}

.post-footer .span {margin-right:.3em}

.rm-button-wrap {
  position:absolute;
  bottom:10px;
  right:10px;
  left:0;
  margin-left:110px;
}

/* Related Posts */
#related-posts {margin:.7em 3% 1em}
#related-posts h2 {margin:0 .3em .7em}

#related-posts-border {
  color:#999;
  background-color:#333;
  -webkit-box-shadow:inset 0 0 7px black;
  -moz-box-shadow:inset 0 0 7px black;
  box-shadow:inset 0 0 7px black;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  padding:7px;
}

.related-posts-container {
  border:1px solid #3c3c3c;
  -webkit-box-shadow:inset 0 0 3px black;
  -moz-box-shadow:inset 0 0 3px black;
  box-shadow:inset 0 0 3px black;
  height:370px;
  overflow:auto;
  padding:1.8em;
}

.related-posts-container a:link {color:#5687b8}
.related-posts-container a:hover {text-decoration:underline}
.sidebar .related-posts-container ul {margin:.7em 0 2em}

/* Blog pager */
#blog-pager {
  clear:both;
  text-align:right;
  padding:0 3%;
  line-height:4.6em;
}

/* Sidebar & Advertisement */
.sidebar {line-height:1.4}

#about h2,
.sidebar h2,
.sidebar-box h2 {letter-spacing:0}

#ad-wrapper,.sidebar-box {
  width:29%;
  float:right;
  display:inline;
  color:#999;
  background-color:#333;
  -webkit-box-shadow:inset 0 0 2px black;
  -moz-box-shadow:inset 0 0 2px black;
  box-shadow:inset 0 0 2px black;
  margin:0 1.05% 1em 0;
}

.sidebar-box {
  width:28.8%;
  min-height:100px;
  margin:0 1% 10px 0;
  border:2px solid #999;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

.sidebar-box h2 {
  background-color:#333;
  font:normal bold 11px/26px Arial,Sans-Serif;
  text-transform:uppercase;
  text-align:center;
  position:relative;
  z-index:4;
  color:#aaa;
  padding:2px 0 0;
  border-bottom:1px solid #222;
  -webkit-box-shadow:0 1px 0 #444;
  -moz-box-shadow:0 1px 0 #444;
  box-shadow:0 1px 0 #444;
}

#quote-frame iframe,
.sidebar-box iframe {
  display:block;
  overflow:hidden;
}

#updated-posts-container {height:420px}

#ad-1 {
  text-align:center;
  border:1px solid #3c3c3c;
  -webkit-box-shadow:inset 0 0 3px black;
  -moz-box-shadow:inset 0 0 3px black;
  box-shadow:inset 0 0 3px black;
  margin:7px;
  padding:1.4em 1em 1em;
}

#ad-1 a img {
  width:125px;
  height:125px;
  border:none;
  background:transparent;
  -webkit-box-shadow:0 0 2px black;
  -moz-box-shadow:0 0 2px black;
  box-shadow:0 0 2px black;
  padding:4px;
}

#ad-1 a:hover img {background-color:#6788E8}

#ad-2 {
  text-align:center;
  padding:0 0 20px;
}

#ad-2 iframe {margin:10px auto}

#ad-banner-wrapper {
  text-align:left;
  margin:0 0 0 1.8%;
}

img.ad-banner {
  border:4px solid #333;
  width:88%;
  margin:0 0 2px;
}

#ad-bottom {
  width:auto;
  margin:200px 0 0;
  overflow:hidden;
}

#ad-bottom img {
  width:125px;
  height:125px;
}

#ad-bottom .container {
  border-top:5px solid #0186CB;
  background-color:#eee;
  width:44.8%;
  overflow:hidden;
  padding:2% 2% 1018px 2%;
  margin:0 0 -1000px 0;
}

#ad-bottom .container:hover img {border-color:#FF5DC2}

#ad-bottom .container img {
  border:2px solid #666;
  float:left;
  margin:0 1em 0 0;
}

#ad-bottom strong {
  display:block;
  margin-bottom:5px;
}

.inline-ad {
  margin:-10px 14px 10px;
  background-color:#eee;
  border-top:4px solid #0186CB;
  padding:10px;
  position:relative;
  text-align:left;
  clear:both;
}

.inline-ad .snippet-outer {
  width:auto;
  margin-left:315px;
}

.inline-ad .snippet-outer ul {
  margin:7px 0 0;
  padding:0 0;
}

.inline-ad .snippet-outer li {
  list-style:none;
  margin:0 0 2px;
  background-color:#e5e5e5;
  padding:0 7px 0 7px;
  line-height:24px;
  height:24px;
  overflow:hidden;
  border-bottom:1px dotted #ccc;
}

/* Top ribbon */
#top-ribbon {
  position:absolute;
  top:0;
  right:27.5%;
  z-index:10;
  width:108px;
  height:260px;
  background-color:#333;
  color:#999;
  font:normal normal 11px Verdana,Arial,Sans-Serif;
  -webkit-box-shadow:0 5px 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 5px 7px rgba(0,0,0,.7);
  box-shadow:0 5px 7px rgba(0,0,0,.7);
  -webkit-border-radius:0 0 5px 5px;
  -moz-border-radius:0 0 5px 5px;
  border-radius:0 0 5px 5px;
  -webkit-transition:right .15s linear;
  -moz-transition:right .15s linear;
  -ms-transition:right .15s linear;
  -o-transition:right .15s linear;
  transition:right .15s linear;
  border:1px solid #444;
  border-color:#444 #222 #222 #444;
  padding:10px;
}

#top-ribbon:after {
  content:"";
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:100%;
  left:20px;
  border:15px solid transparent;
  border-top-color:#333;
}

#top-ribbon .img-container {
  width:82px;
  border:3px double #3c3c3c;
  background:transparent;
  -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  display:block;
  margin:0 0 10px auto;
  padding:10px;
}

#top-ribbon .img-container img {
  display:block;
  background-color:#3c3c3c;
  padding:5px 0;
}

#level {
  width:108px;
  display:block;
  margin:0 0 0 auto;
}

#level li {
  display:block;
  margin:0 0 2px;
  list-style:none;
}

#level li a {
  display:block;
  background-color:#3c3c3c;
  color:#ccc;
  font:normal normal 8px Arial,Sans-Serif;
  text-transform:uppercase;
  position:relative;
  -webkit-transition:all .26s ease-out;
  -moz-transition:all .26s ease-out;
  -ms-transition:all .26s ease-out;
  -o-transition:all .26s ease-out;
  transition:all .26s ease-out;
  padding:6px 10px;
}

#level li a:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  right:0;
  top:0;
  display:block;
  border:11px solid transparent;
  border-right-color:#333;
}

#level li a:hover {
  -webkit-transition-duration:0s;
  -moz-transition-duration:0s;
  -ms-transition-duration:0s;
  -o-transition-duration:0s;
  transition-duration:0s;
  color:white;
  text-decoration:none;
  padding:6px 0 6px 15px;
}

#level li.satu a:hover {background-color:#DC98FF}
#level li.dua a:hover {background:#FF5DC2}
#level li.tiga a:hover {background:#0186CB}
#level li.eks a:hover {background:#0251C9}
#level li.current a {border-left:2px solid #39f}

#subscribe-form {
  width:210px;
  padding:0 0 7px;
  background-color:#5D73B5;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  position:absolute;
  top:10px;
  left:10px;
  display:none;
}

#subscribe-form input.email-input {
  width:172px;
  margin:10px 10px 7px 10px;
  padding:7px;
  color:white;
}

#subscribe-form input.email-submit {
  margin:0 0 0 10px;
  border:none;
  background-color:#405289;
  background-image:none;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

#subscribe-form input.email-submit:hover {
  background-color:#2E3E6A;
  background-image:none;
}

a.close-form,
a.close-form:hover {
  float:right;
  margin-right:8px;
  color:white;
  font-size:120%;
  text-decoration:none;
}

/* Widgets */
#HTML2 .widget-content {text-align:center}

#HTML2 img {
  display:inline;
  background-color:black;
  padding:4px;
  border:none;
  opacity:.7;
}

#HTML2 img:hover {opacity:1}

.label-count {
  position:fixed !important;
  position:absolute;
  background-color:black;
  color:white;
  font-size:150%;
  font-weight:bold;
  top:0;
  right:20px;
  margin-top:200px;
  opacity:.7;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:.5em 1.5em;
  display:none;
}

#ArchiveList {text-align:left}
#ArchiveList .toggle-open {line-height:.6em}
#ArchiveList a.post-count-link,
#ArchiveList a.post-count-link:link,
#ArchiveList a.post-count-link:visited {text-decoration:none}
#ArchiveList a.toggle,
#ArchiveList a.toggle:link,
#ArchiveList a.toggle:visited,
#ArchiveList a.toggle:hover {text-decoration:none}

#ArchiveList .toggle {
  cursor:pointer;
  font-family:Arial,Sans-Serif;
}

#ArchiveList ul {
  list-style:none;
  list-style-image:none;
  border-width:0;
  margin:10px 0 0;
}

#ArchiveList ul li {
  background:none;
  list-style:none;
  list-style-image:none;
  list-style-position:outside;
  border-width:0;
  padding-left:15px;
  text-indent:-15px;
  margin:.25em 0;
  background-image:none;
}

#ArchiveList ul ul li {padding:0 0 0 1.2em}
#ArchiveList ul.posts li {padding:0 0 0 1.3em}
#ArchiveList .collapsed ul,
.sidebar .item-control {display:none}

.PopularPosts img {
  padding:0;
  margin:5px 10px 0 0;
  border:none;
  background-color:#111;
  float:left;
}

.rpthumb {background-color:#333}

.rpthumb li {
  height:44px;
  list-style:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  display:block;
  padding:7px 7px;
  overflow:hidden;
  background-color:#333;
  text-align:left;
}

.rpthumb li a {
  font:bold 11px Arial,Sans-Serif;
  color:#999;
  display:block;
}

.rpthumb li a:hover {color:white}

.rpthumb img.rp-thumb {
  outline:none;
  border:2px solid black;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0 10px 0 0;
  width:40px;
  height:40px;
}

.rpthumb span {
  font:normal normal 10px/1.4 Tahoma,Verdana,Arial,Sans-Serif;
  color:#666;
}

.frame-preloader iframe {
  border:none;
  width:100%;
}

/* About Panel */
#about {
  width:90%;
  margin:1em auto;
  padding:1em;
  text-align:left;
  border:3px double #3c3c3c;
  position:relative;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.6);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.6);
  box-shadow:0 0 2px rgba(0,0,0,.6);
  display:none;
}

#about p {margin:0 0 1.2em}

#about h2 {
  background-color:#3c3c3c;
  font:normal normal 120%/2em Alike,Cambria,Georgia,Serif;
  text-transform:uppercase;
  position:relative;
  margin:0 0 1.2em;
  padding:0 .8em;
  color:white;
}

#about .col {
  width:56%;
  height:570px;
  display:inline;
  color:#ccc;
  overflow:auto;
  margin:0 1%;
}

#about .col a,
#about .col a:link {color:#3582d0}

#about .col.float-left {
  margin-right:0;
  padding-right:20px;
  border-right:7px solid #3582d0;
}

#about .col.float-right {
  width:36%;
  margin-left:0;
}

#about .col.float-left .drop-cap {
  font:normal normal 22px Alike,Cambria,Georgia,Serif;
  color:white;
  text-align:center;
  width:30px;
  height:auto;
  background-color:#3c3c3c;
  position:relative;
  margin:2px 10px 2px 0;
  padding:10px 0 30px;
}

#about .col.float-left .drop-cap:after {
  content:"";
  width:0;
  height:0;
  border:15px solid transparent;
  border-bottom-color:#333;
  position:absolute;
  bottom:0;
  left:0;
}

#hide-about,
#hide-about:hover {
  cursor:pointer;
  position:absolute;
  top:6px;
  right:6px;
  background:none;
  font:normal bold 13px/14px Georgia,Serif;
  color:white;
  text-decoration:none;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  padding:2px 6px 4px;
}

#hide-about:hover {
  background-color:white;
  color:black;
}

/* Share buttons */
.addthis_toolbox {
  clear:both;
  width:90%;
  height:20px;
  margin:0 0 2px 1%;
  position:relative;
}

.addthis_toolbox .addthis-tooltip {
  display:block;
  width:150px;
  padding:10px 15px;
  position:absolute;
  bottom:100%;
  left:30px;
  z-index:77;
  margin-bottom:40px;
  background-color:black;
  color:white;
  font-size:98%;
  text-align:center;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  opacity:0;
  visibility:hidden;
  -webkit-transition:all .26s ease-out;
  -moz-transition:all .26s ease-out;
  -ms-transition:all .26s ease-out;
  -o-transition:all .26s ease-out;
  transition:all .26s ease-out;
}

.addthis_toolbox .addthis-tooltip:before {
  content:"";
  width:0;
  height:0;
  border:7px solid transparent;
  border-top-color:black;
  position:absolute;
  top:100%;
  left:10px;
}

.addthis_toolbox .addthis_inner:hover .addthis-tooltip {
  visibility:visible;
  opacity:1;
  margin-bottom:25px;
}

/* Bottom Checkbox */
#checker-box {
  position:fixed !important;
  position:absolute;
  bottom:0;
  right:20px;
  border:2px solid #888;
  border-bottom-width:0;
  background-color:#B2B2B2;
  font-size:96%;
  z-index:80;
  padding:2px 1.5% 2px 2px;
}

#checker-box label {
  position:relative;
  top:-2px;
}

/* Toolpik */
.toolpik {
  position:fixed !important;
  position:absolute;
  top:40px;
  left:20px;
  z-index:1000;
  background-color:#F7FFAD;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.7);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.7);
  box-shadow:0 1px 2px rgba(0,0,0,.7);
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  width:300px;
  height:auto;
  font:normal normal 12px Alike,Cambria,Times,Serif;
  letter-spacing:0;
  text-transform:none;
  color:#222;
  text-align:left;
  padding:15px;
  display:none;
}

.toolpik:after {
  content:"";
  display:table;
  clear:both;
}

.toolpik h2 {
  font-size:18px;
  margin:0 0 10px;
}

.toolpik p {margin:10px 0}

.toolpik a {
  color:#E30374;
  border-bottom:1px dotted #ddd;
}

pre,i[rel="pre"] {
  display:block;
  font:normal normal 12px "Courier New",Courier,Monospace;
  color:#839496;
  padding:.5em .5em .5em 1em;
  background-color:#002b36;
  border-left:4px solid #268bd2;
  position:relative;
  overflow:auto;
  word-wrap:normal;
  white-space:pre;
}

pre code,
#comments pre code {
  display:block;
  font:inherit;
  color:inherit;
  letter-spacing:0;
  white-space:pre;
}

pre[rel="HTML"],pre[data-codetype="HTML"] {border-left-color:#4584BE}
pre[rel="CSS"],pre[data-codetype="CSS"] {border-left-color:#5DA028}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"] {border-left-color:#bbb}
pre[rel="JQuery"],pre[data-codetype="JQuery"] {border-left-color:#7073CF}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"] {border-left-color:#E36B23}
pre[rel="XML"],pre[data-codetype="XML"] {border-left-color:#C44032}
pre[rel*="+"],pre[data-codetype*="+"] {border-left-color:#7C814D}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color:#586e75;
  font-style:italic;
}

pre .keyword,
pre .css .rule .keyword,
pre pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .lisp .title {color:#859900}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {color:#2aa198}

pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .builtin,
pre .built_in,
pre .lisp .title,
pre .identifier,
pre .title .keymethods,
pre .id {color:#268bd2}

pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {font-weight:bold}

pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label {color:#b58900}

pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .diff .change,
pre .special,
pre .keymethods,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {color:#cb4b16}

pre .deletion {color:#dc322f}
pre .tex .formula {background:#073642}

pre.numbered {
  border-left-width:2px;
  padding-left:1em;
}

pre .line-number,
pre.numbered code {
  display:block;
  line-height:16px;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#586E75;
  border-right:2px solid #05313B;
  text-align:right;
  min-width:35px;
}

pre .line-number span {
  display:block;
  position:relative;
  padding:0 .5em 0 1em;
}

pre .line-number span:nth-child(even) {background-color:#03242C}

pre .line-number span em {
  position:absolute;
  bottom:-1px;
  left:100%;
  background-color:orange;
  padding:0 2px 1px 2px;
  border:1px solid black;
  font-style:normal;
  color:black;
  display:none;
}

pre .line-number span:hover em {display:block}

pre .line-number span:target a {
  display:block;
  color:white;
  position:relative;
  background-color:#268bd2;
  margin:0 -.5em 0 -1em;
  padding:0 .5em 0 0;
}

pre.numbered code span {line-height:12px}

pre[data-codetype="HTML"] .line-number span:target a {background-color:#4584BE}
pre[data-codetype="CSS"] .line-number span:target a {background-color:#5DA028}
pre[data-codetype="JavaScript"] .line-number span:target a {background-color:#bbb}
pre[data-codetype="JQuery"] .line-number span:target a {background-color:#7073CF}
pre[data-codetype="JQuery UI"] .line-number span:target a {background-color:#E36B23}
pre[data-codetype="XML"] .line-number span:target a {background-color:#C44032}
pre[data-codetype*="+"] .line-number span:target a {background-color:#7C814D}

pre .line-number span:target:before {
  content:"";
  display:block;
  height:150px;
  margin-top:-150px;
  visibility:hidden;
}

.bright-code pre {
  background-color:white;
  color:#657b83;
  border:1px solid #E9E7E0;
}

.bright-code mark,.bright-code .highlight {background-color:skyblue}
.bright-code pre code {color:#657b83}
.bright-code pre .line-number {border-right-color:#6CE26C}
.bright-code pre .line-number span a {color:#bbb}
.bright-code pre .line-number span:nth-child(even) {background-color:#eee}
.bright-code pre .line-number span:target,pre .line-number span:target {background:none}
.bright-code pre .line-number span:target a {color:black}

.bright-code .comment,
.bright-code .template_comment,
.bright-code .diff .header,
.bright-code .doctype,
.bright-code .lisp .string,
.bright-code .javadoc {color:#93a1a1}

pre.plain,
.bright-code pre.plain {
  border:1px solid #ccc;
  background:none;
  padding:1.5em 2em;
  margin-left:0;
  margin-right:0;
}

#error-page {
  background-color:#ccc;
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99999;
}

#error-page img {
  position:absolute;
  top:50%;
  left:50%;
  margin:-110px auto auto -110px;
}

.recent-comments {
  border:2px solid #111 !important;
  margin:0 0 10px;
}

.recent-comments ul,
.recent-comments li {
  text-align:left;
  list-style:none;
  font:normal bold 10px Arial,Sans-Serif;
  color:#ccc;
}

.recent-comments li {
  display:block;
  padding:5px 10px;
  background-color:#7C0505;
  border-bottom:1px solid #640505;
  position:relative;
  overflow:hidden;
}

.recent-comments li:hover,
.recent-comments li:first-child {background-color:#650606}
.recent-comments a {color:white}
.recent-comments a:hover {text-decoration:underline}
.post:not([data-author]) {display:none}


/* For Disabled JavaScript */
.no-js #cm_block,
.no-js #about:target {display:block}

.no-js div:target .cm_entry,
.comments .selected .cm_entry {border:2px solid yellow}

.no-js div:target .avatar-image-container,
.comments .selected .avatar-image-container {
  border:5px solid yellow;
  padding:0 0;
}
